<template>
    <div>
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
          <van-list 
            id="todoList"
            v-model="loading"
            :finished="finished"
            :finished-text='!haveTodoError?"没有更多数据":"" '
            :error-text="todoErromessage"
            @load="onLoad"
            style="margin-bottom: 50px;">
            <van-cell v-for="(item,index) in list" :key="index" >
                <div style="display:flex">
                  <div style="flex:1" @click="todetail(index,item)">
                    <span style="display:inline-block;word-break: break-all;" class="font16">{{item.title}}</span>
                    <div class="font12">
                      <van-image round width="15px" height="15px" :src="
                          item.account.img.anonymousFilePath
                            ? getUrl(item.account.img.anonymousFilePath)
                            : ''"
                      />
                      <span class="ml5">{{item.account.nickname}}</span>
                      <span class="ml5">{{item.createdTime.substring(0,11)}}</span>
                      <span class="ml5" v-if="item.lastCommentTime">最后回复</span>
                      <span class="ml5" v-if="item.lastCommentTime">{{getDateDiff(item.lastCommentTime)}}</span>
                    </div>
                    <div style="display:flex;justify-content: space-between;width:168px" class="font12"> 
                      <div><van-icon name="eye-o" size="15px" />{{item.displayOrder}}</div>
                      <div><van-icon name="chat-o" size="15px" />{{item.commentCount}}</div>
                      <div><van-icon name="good-job-o" size="15px" :class="item.isSupport ? 'colorOrange' : ''"/>{{item.supportVO.isSupport}}</div>
                      <div><van-icon name="good-job-o" size="15px" :class="item.isOppose ? 'colorOrange' : ''" style="transform: rotate(180deg)"/>{{item.supportVO.isOppose}}</div>
                    </div>
                  </div>
                  <div v-if="otherUser==false||isHadmin==true||item.isDel==true" class="font14" style="color:#00a0e9">
                    <span @click="deleteItem(item)">删除</span>
                  </div>
                </div>
            </van-cell>
            <div v-show="!haveTodoData" class="text-c" >
                <img
                    width="100px" height="100px" 
                    :src="require('@/assets/images/pic_nodata.png')"
                    alt="暂无数据"
                    style="margin: 120px 50px 0"
                    @click="getListdata('todo')"
                />
            </div>   
            
            <div v-show="haveTodoError" class="text-c" >
                <img
                    width="100px" height="100px" 
                    :src="require('@/assets/images/pic_neterror.png')"
                    alt="获取数据失败"
                    style="margin: 120px 50px 0"
                    @click="getListdata('todo')"
                />
                <div class="color-b font14" style="margin: 20px 0 0 15px">
                    获取数据失败!
                </div>
            </div>     
          </van-list>
      <!-- </van-pull-refresh> -->
    </div>
</template>
<script>
import {findMyContent,deleteById1} from "@/api/gettodo";
import {Toast} from "vant";
import {Notify} from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'
import { openFileUrl } from '@/store/openFile'
import { Dialog } from 'vant';

export default {
    name:'myword',
    data(){ 
        return{
            active:0,
            list:[],
            refreshing:false,
            loading:false,
            finished:false, 
            gettodoListQuery:{source:"MOBILE",page:1,rows:1000,size:1000},
            maxpagetodo:100,
            todoErromessage:'',
            haveTodoData:true,
            haveTodoError:false,
            otherUser:false,
            createUser:'',
            isHadmin: false
        }
    },
    computed:{
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),
    }, 
    activated(){
      this.isHadmin=this.$route.query.isHadmin
      if(this.$route.query.otherUser=='1'){
        this.otherUser=true
        this.createUser=this.$route.query.createUser
      }else{
        this.otherUser=false
        this.createUser=this.user.userName
      }
      let dom = document.getElementById('todoList');
      if (dom != null) {
              if (dom.scrollTop > 0) {
                  dom.scrollTop = 0;
              }
      }
      this.onRefresh()
    }, 
    created() {
      
    },
    mounted(){
         
    },
    methods:{
      getUrl(value) {
        console.log('图片地址是:'+openFileUrl(value))
        return openFileUrl(value)
      },
        //查询
      onRefresh(){  
        //清空列表数据
        this.finished =false;
        //重新加载数据
        //将loading设置为true,表示处于加载状态
        this.loading = true;
        this.refreshing = true;
        this.gettodoListQuery.page=1;
        this.maxpagetodo=100;
        this.onLoad();
      },
        onLoad(){
            // setTimeout(() =>{
                if(this.refreshing){
                    this.list=[];
                    this.refreshing =false
                }
                this.list=[];
                console.log("AAAAA"+this.createUser)
                // if(this.gettodoListQuery.page<=this.maxpagetodo){  
                    findMyContent(Object.assign(this.gettodoListQuery,
                    {userName:this.createUser},
                        {searchTitle:this.searchTitle},
                    ))
                    .then((result) =>{
                        this.haveTodoError=false;
                        if(!result.data){
                            this.loading=false;
                            this.finished=true;
                            Notify(result.message);
                            this.todoErromessage=result.message;
                            return;
                        }
                        let listdetails = this.list;
                        if(this.gettodoListQuery.page==1){
                            listdetails=[];
                            if(result.data.data.content){
                                listdetails=result.data.data.content;
                            }
                            if(listdetails.length==0){
                                this.haveTodoData=false;
                            }else{
                                this.haveTodoData=true;
                            }
                            this.maxpagetodo=result.data.data.totalPages;
                        }else{
                            if(result.data.data.content){
                                listdetails = listdetails.concat(result.data.data.content);
                            }
                        }
                        
                        this.list=listdetails;
                        this.loading =false;
                        this.finished=true;
                        // this.gettodoListQuery.page=this.gettodoListQuery.page+1;
                    })
                    .catch((error) => {
                        console.log("22222222222"+JSON.stringify(error));
                        this.loading = false
                        this.finished=true;
                        this.haveTodoData=true;
                        this.todoErromessage='获取数据失败,请稍后重试';
                        this.haveTodoError=true,
                        Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                    });
                // }else{
                //     this.loading = false
                //     this.finished=true;
                // }
        },
        timeUtil(value){
          return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },
        getListdata(value){
          this.onRefresh();
        },
        getDateDiff(dateTimeStamp){
            var lastdate = moment(dateTimeStamp, 'YYYY-MM-DD hh:mm:ss')
            var result=''
            var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = now - lastdate;
            if(diffValue < 0){
                //若日期不符则弹出窗口告之
                //alert("结束日期不能小于开始日期！");
            }
            var monthC =diffValue/month;
            var weekC =diffValue/(7*day);
            var dayC =diffValue/day;
            var hourC =diffValue/hour;
            var minC =diffValue/minute;
            if(monthC>=1){
                result= parseInt(monthC) + "个月前";
            }
            else if(weekC>=1){
                result= parseInt(weekC) + "周前";
            }
            else if(dayC>=1){
                result= parseInt(dayC) +"天前";
            }
            else if(hourC>=1){
                result= parseInt(hourC) +"个小时前";
            }
            else if(minC>=1){
                result = parseInt(minC) +"分钟前";
            }else{
               result="刚刚";
            }
               
            return result;
        },
        deleteItem(item){
          Dialog.confirm({
            title: '提示',
            message: '您确认删除吗？',
          })
          .then(() => {
            console.log('去删除'+item.id)
            Toast.loading({
              message: '删除中',
              forbidClick:false
            });
            deleteById1(Object.assign({userName:this.user.userName},{id:item.id}))
              .then((res)=>{
                Toast.clear()
                if(!res.data){
                  Notify(res.message)
                  return
                }
                Notify({type:'success',message:'删除成功'})
                this.onRefresh()
              })
          })
          .catch(() => {
            console.log('取消了')
            // on cancel
          });
        },
        todetail(index,item){
          console.log('点击的条目是'+index+'id是'+item.id)
          var titleName=''
          if(item.categoryName){
            titleName=item.parentCategoryName+'-'+item.categoryName
          }else{
            titleName=item.parentCategoryName
          }
          this.$router.push({
              path: "/newcolordetail",
              query: { 
                  itemId: item.id,
                  title : titleName
                    },
          });
        }
       
    }
}
</script>
<style scoped>
 .colorOrange {
  color: #f76e20;
}
.van-cell::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0px;
    bottom: 0;
    left: 0px;
    border-bottom: 5px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
</style>